<template>
	<up-navbar bgColor="transparent">
		<template #left>
			<view class="u-flex u-flex-items-center">
				<view class="f-s-16 u-m-r-12 u-main-color f-w-b">慈溪市</view>
				<!-- <up-icon name="arrow-down"></up-icon> -->
				<!-- <image src="@/static/tq.png" mode="widthFix" class="u-m-l-28" style="width: 40rpx;height: auto;">
					</image> -->
				<!-- <weather-icon :weather="pageData.weather.info"></weather-icon> -->
				<view class="u-m-l-12 f-s-12 " v-if="pageData.weather.temperature">{{ pageData.weather.temperature }}℃
				</view>
			</view>
		</template>
	</up-navbar>

	<view class="home-top" :style="{
		padding: `${bottom + 24}px 32rpx 28rpx`
	}">
		<image src="@/static/index.png" mode="widthFix" style="width: 380rpx;height: auto;"></image>
		<view class="f-s-14 u-m-t-32 u-content-color">主动出击，抢占先机，活动有序，提高效率</view>
		<view class="user-box">
			<view class="u-flex u-flex-between u-flex-items-center">
				<block v-if="Object.keys(userInfo).length == 0">
					<view class="u-flex u-flex-items-center" @click="login">
						<up-avatar :src="userInfo.avatar" :size="30"></up-avatar>
						<view class="f-s-14 u-m-l-20">立即登录</view>
					</view>
				</block>

				<view v-else class="u-flex u-flex-items-center">
					<up-avatar src="https://uview-plus.jiangruyi.com/uview-plus/album/5.jpg" :size="30"></up-avatar>
					<view class="f-s-16 u-m-l-20 f-w-b">{{ userInfo.nickName }}</view>
					<!-- <view class="dept">办公室</view> -->
				</view>
				<view v-if="Object.keys(userInfo).length > 0" class="f-s-12 u-light-color" @click="loginOut">退出登录</view>
			</view>
			<view class="u-flex u-flex-between u-flex-items-center u-m-t-30 info-box">
				<view class="u-flex u-flex-items-center">
					<image src="../static/message.png" mode="widthFix" style="width: 40rpx;height: auto;"></image>
					<view class="f-s-12 u-m-l-20 msg-text">消息通知</view>
					<view class="_line"></view>
					<!-- <view class="f-s-12 u-content-color" @click="showNotice">暂无通知</view> -->
					<view class="f-s-12 u-light-color">暂无通知</view>
				</view>
				<up-icon name="arrow-right"></up-icon>
			</view>
		</view>
	</view>
	<view class="home-area" v-if="pageData.appList.length > 0">
		<block v-for="(app,index) in pageData.appList" :key="app.id">
			<app-item :info="app" :line="index < pageData.appList.length-1"></app-item>
		</block>
	</view>
	<up-empty marginTop="120" v-else mode="data" text="暂无内容" :width="80" :height="80" icon="https://imgs.ddeke.com/2024/08/01/rT5sB51gU8.png">
	</up-empty>

	<up-popup :show="show" @close="show = false" :safeAreaInsetBottom="false" :round="12" mode="center">
		<view class="notice-box">
			<view class="text-center f-s-18 f-w-b">系统通知</view>
			<view class="f-s-14 u-info u-m-t-34">王家卫你好，</view>
			<view class="f-s-14 u-m-t-16">{{ notice.noticeTitle }}</view>
			<view class="f-s-14 u-m-t-8 u-info">
				{{ notice.noticeContent }}
			</view>
			<view class="f-s-12 u-m-t-16 u-light-color">
				{{ notice.createTime }} 由{{ notice.createBy }}发布
			</view>
			<up-button text="知道了" :customStyle="{
				width: '500rpx',
				height: '80rpx',
				background: '#1677FF',
				borderRadius: '16rpx',
				fontSize: '28rpx',
				color: '#FFFFFF',
				marginTop: '32rpx'
			}" @click="show = false"></up-button>

		</view>
	</up-popup>
</template>

<script setup>
	import AppItem from '@/components/AppItem.vue';
	import WeatherIcon from '@/components/WeatherIcon.vue';
	import {
		homeData,
		appData,
		noticeData,
		noticeInfo
	} from '@/api/home.js'
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShareAppMessage
	} from "@dcloudio/uni-app"
	import store from '@/store/index.js';
	import {
		toast
	} from '../utils/common';
	const bottom = uni.getMenuButtonBoundingClientRect().bottom
	const show = ref(false)
	const pageData = ref({
		weather: {},
		appList: [],
		noticeList: []
	})
	const notice = ref({})
	const userInfo = ref({})

	onLoad(() => {
		userInfo.value = store.getters.userInfo
		init()
	})

	const login = () => {
		uni.navigateTo({
			url: '/pages/login'
		})
	}

	const showNotice = (id) => {
		noticeInfo(id).then(resp => {
			notice.value = resp.data
			show.value = true
		})
	}

	const loginOut = () => {
		store.dispatch('LoginOut').then(resp => {
			userInfo.value = {}
			pageData.value.appList = []
			toast('退出成功')
			// uni.reLaunch({
			// 	url: '/pages/index'
			// })
		})
	}

	const init = () => {
		homeData().then(resp => {
			pageData.value = resp.data
		})
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5 !important;
	}

	.home-top {
		height: 463rpx;
		background-image: url(https://imgs.ddeke.com/2024/07/30/jHQbggSf9h.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 100%;
		box-sizing: border-box;
		position: relative;

		.user-box {
			position: absolute;
			width: calc(100vw - 64rpx);
			background-image: url(https://imgs.ddeke.com/2024/07/30/Y7hOrrxAMr.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;
			box-sizing: border-box;
			padding: 32rpx;
			height: 202rpx;
			margin-top: 32rpx;

			.dept {
				border-radius: 4rpx;
				border: 1rpx solid rgba(22, 119, 255, 0.25);
				padding: 6rpx 8rpx;
				font-size: 20rpx;
				color: #1677FF;
				line-height: 20rpx;
				margin-left: 24rpx;
			}

			.info-box {
				padding-top: 20rpx;
				border-top: 1rpx solid rgba(0, 0, 0, 0.06);
			}

			.msg-text {
				color: #FF701D;
			}

			._line {
				margin: 0 16rpx;
				width: 1rpx;
				height: 32rpx;
				background: rgba(0, 0, 0, 0.06);
			}
		}


	}

	.home-area {
		margin: 132rpx 32rpx 0;
		padding: 32rpx 24rpx;
		background: #ffffff;
		box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 20rpx;
	}

	.notice-box {
		width: 580rpx;
		padding: 32rpx 32rpx 34rpx;
		box-sizing: border-box;
	}
</style>